<template>
  <div>
    <el-row>
      <el-col :span="5" style="margin-right: 40px">
        <el-card style="padding: 5px; height: 750px">
          <div>
            <div
              v-for="(item, index) in noticeList"
              class="notice"
              :class="active == index ? 'active' : ''"
              @click="choose(item, index)"
            >
              <img
                :src="item.icon"
                style="
                  margin-right: 10px;
                  padding-left: 10px;
                  width: 10%;
                  height: 10%;
                "
              />
              {{ item.name }}({{ item.number }})
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card>
          <el-form :model="formData" inline>
            <el-form-item>
              <el-button type="success">
                <IconifyIconOffline :icon="Check" />全部标记为已读
              </el-button>
              <el-button type="danger">
                <IconifyIconOffline :icon="Delete" />清空所有消息
              </el-button>
            </el-form-item>
            <el-form-item label="消息标题">
              <el-input v-model="formData.noticeName" style="width: 85%" />
            </el-form-item>
            <el-form-item label="发送者">
              <el-input v-model="formData.sender" style="width: 85%" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary">
                <IconifyIconOffline :icon="Check" />搜索
              </el-button>
              <el-button> <IconifyIconOffline :icon="Delete" />重置 </el-button>
            </el-form-item>
          </el-form>
        </el-card>
        <!-- 详情主体内容 -->
        <div class="center_warp">
          <div v-for="(item, index) in noticeDetailList">
            <div class="detail_wapper">
              <el-avatar
                :size="30"
                :src="item.circleUrl"
                style="margin-right: 15px"
              />
              <div>
                <div v-if="item.isNotice == '1'" class="isNoticeRed">
                  <div class="point" v-if="item.noRead" />
                  <span style="padding-left: 20px">催办消息</span>
                </div>
                <div v-if="item.isNotice == '2'" class="isNoticeBlue">
                  <div class="point" v-if="item.noRead" />
                  <span style="padding-left: 20px">系统消息</span>
                </div>
                <div
                  class="wapper"
                  :class="
                    item.isNotice === '1' || item.isNotice === '2'
                      ? 'noBored'
                      : ''
                  "
                >
                  <div
                    class="point"
                    v-if="item.noRead && item.isNotice == '0'"
                  />
                  <div style="width: 60%; word-break: break-all">
                    {{ item.words }}
                  </div>
                  <el-button>查看详情</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from "vue";
// import Open from
import Check from "@iconify-icons/ep/check";
import Delete from "@iconify-icons/ep/delete";
// import { tr } from 'element-plus/es/locale';

const noticeList = ref([
  {
    name: "全部通知",
    number: "3",
    icon: new URL("./icon/allMessage.png", import.meta.url).href
  },
  {
    name: "未读",
    number: "2",
    icon: new URL("./icon/message.png", import.meta.url).href
  },
  {
    name: "已读",
    number: "1",
    icon: new URL("./icon/messageOpen.png", import.meta.url).href
  }
]);
const active = ref(0);

const choose = (item, index) => {
  active.value = index;
};

const noticeDetailList = ref([
  {
    circleUrl:
      "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    words: "xxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    isNotice: "1",
    noRead: true
  },
  {
    circleUrl:
      "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    words: "yyyyyyyyyyyyyyyyyy",
    isNotice: "2",
    noRead: false
  },
  {
    circleUrl:
      "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    words: "zzzzzzzzzzzzzzzzzz",
    isNotice: "0",
    noRead: true
  },
  {
    circleUrl:
      "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    words: "zzzzzzzzzzzzzzzzzz",
    isNotice: "0",
    noRead: true
  },
  {
    circleUrl:
      "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    words: "yyyyyyyyyyyyyyyyyy",
    isNotice: "2",
    noRead: false
  }
]);

const formData = reactive({
  noticeName: "",
  sender: ""
});
</script>

<style scoped>
.notice {
  padding: 10px 0;
  cursor: pointer;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.active {
  background: linear-gradient(270deg, #8eb5ff 0%, #2767dd 100%);
  border-radius: 4px;
  color: #ffffff;
}

.el-card {
  --el-card-padding: 10px !important;
}

.detail_wapper {
  display: flex;
  padding: 30px 0;
}

.center_warp {
  height: 670px;
  overflow-y: scroll;
}

.wapper {
  width: 518px;
  height: 80px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e2e3e6;
  /* line-height: 80px; */
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
}

.isNoticeRed {
  width: 518px;
  height: 41px;
  background: #ffe5e5;
  border-radius: 8px 8px 0px 0px;
  line-height: 41px;
  color: red;
  position: relative;
}

.isNoticeBlue {
  width: 518px;
  height: 41px;
  background: #e8efff;
  border-radius: 8px 8px 0px 0px;
  line-height: 41px;
  color: #5086fc;
  position: relative;
}

.noBored {
  border-top: none;
  border-radius: 0px 0px 8px 8px;
}

.point {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fd4242;
}
</style>
